import MenuToggle from '../components/MenuToggle';
import { CardContent, CardHeader, Card, CardTitle } from '@/components/ui/card';
import { Table, TableBody, TableCell, TableHeader, TableRow, TableHead } from '@/components/ui/table';
import Sidebar from '../components/Sidebar';
import React, { useState } from 'react';
import { DialogContent, DialogTitle, DialogFooter, Dialog, DialogHeader, DialogTrigger } from '@/components/ui/dialog';
import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import { Switch } from '@/components/ui/switch';
import { SelectItem, Select, SelectContent, SelectValue, SelectTrigger } from '@/components/ui/select';
import { HelpCircle, Shield, ChevronDown, MoreVertical, EyeOff, Upload, Edit, FileText, Users, Folder, ChevronRight, Eye, Trash2, Move, Star, Search, Share2, Plus, Home, Download, MenuSquare, Settings } from 'lucide-react';
import { DropdownMenuItem, DropdownMenuTrigger, DropdownMenuContent, DropdownMenu } from '@/components/ui/dropdown-menu';
import { Button } from '@/components/ui/button';
const MenuConfig = ({ toggleSidebar }) => {
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedMenus, setSelectedMenus] = useState([]);
  const [showAddDialog, setShowAddDialog] = useState(false);
  const [showEditDialog, setShowEditDialog] = useState(false);
  const [editingMenu, setEditingMenu] = useState(null);
  const [expandedMenus, setExpandedMenus] = useState(['file-management', 'security-management']);

  // 图标映射
  const iconMap = {
    'folder-open': Folder,
    'file-text': FileText,
    'settings': Settings,
    'users': Users,
    'shield': Shield,
    'home': Home,
    'upload': Upload,
    'download': Download,
    'star': Star,
    'share2': Share2,
    'help-circle': HelpCircle
  };

  // 模拟菜单数据
  const [menus, setMenus] = useState([
    {
      id: 1,
      name: '文件管理',
      path: '/file-management',
      icon: 'folder-open',
      parentId: null,
      sort: 1,
      visible: true,
      type: 'menu',
      children: [
        { id: 11, name: '我的文件', path: '/storage/my-file', icon: 'home', parentId: 1, sort: 1, visible: true, type: 'page' },
        { id: 12, name: '共享文件', path: '/shared', icon: 'share2', parentId: 1, sort: 2, visible: true, type: 'page' },
        { id: 13, name: '已加星标', path: '/starred', icon: 'star', parentId: 1, sort: 3, visible: true, type: 'page' }
      ]
    },
    {
      id: 2,
      name: '快速操作',
      path: '/quick-actions',
      icon: 'upload',
      parentId: null,
      sort: 2,
      visible: true,
      type: 'menu',
      children: [
        { id: 21, name: '上传文件', path: '/upload', icon: 'upload', parentId: 2, sort: 1, visible: true, type: 'page' },
        { id: 22, name: '下载管理', path: '/downloads', icon: 'download', parentId: 2, sort: 2, visible: true, type: 'page' }
      ]
    },
    {
      id: 3,
      name: '安全管理',
      path: '/security-management',
      icon: 'shield',
      parentId: null,
      sort: 3,
      visible: true,
      type: 'menu',
      children: [
        { id: 31, name: '用户管理', path: '/security/user-management', icon: 'users', parentId: 3, sort: 1, visible: true, type: 'page' },
        { id: 32, name: '菜单配置', path: '/security/menu', icon: 'settings', parentId: 3, sort: 2, visible: true, type: 'page' }
      ]
    },
    {
      id: 4,
      name: '设置',
      path: '/settings',
      icon: 'settings',
      parentId: null,
      sort: 4,
      visible: true,
      type: 'menu',
      children: [
        { id: 41, name: '个人资料', path: '/profile', icon: 'users', parentId: 4, sort: 1, visible: true, type: 'page' },
        { id: 42, name: '帮助中心', path: '/help', icon: 'help-circle', parentId: 4, sort: 2, visible: true, type: 'page' }
      ]
    }
  ]);

  const [newMenu, setNewMenu] = useState({
    name: '',
    path: '',
    icon: 'file-text',
    parentId: null,
    sort: 1,
    visible: true,
    type: 'page'
  });

  // 获取所有菜单项（包括子菜单）
  const getAllMenuItems = () => {
    const items = [];
    menus.forEach(menu => {
      items.push(menu);
      if (menu.children) {
        items.push(...menu.children);
      }
    });
    return items;
  };

  // 过滤菜单数据
  const filteredMenus = menus.filter(menu => 
    menu.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
    (menu.children && menu.children.some(child => 
      child.name.toLowerCase().includes(searchQuery.toLowerCase())
    ))
  );

  const toggleExpanded = (menuId) => {
    setExpandedMenus(prev => 
      prev.includes(menuId) 
        ? prev.filter(id => id !== menuId)
        : [...prev, menuId]
    );
  };

  const handleMenuSelect = (menuId) => {
    setSelectedMenus(prev => 
      prev.includes(menuId) 
        ? prev.filter(id => id !== menuId)
        : [...prev, menuId]
    );
  };

  const handleSelectAll = () => {
    const allItems = getAllMenuItems();
    if (selectedMenus.length === allItems.length) {
      setSelectedMenus([]);
    } else {
      setSelectedMenus(allItems.map(item => item.id));
    }
  };

  const handleAddMenu = () => {
    const allItems = getAllMenuItems();
    const id = Math.max(...allItems.map(m => m.id)) + 1;
    
    if (newMenu.parentId) {
      // 添加子菜单
      setMenus(prev => prev.map(menu => {
        if (menu.id === parseInt(newMenu.parentId)) {
          return {
            ...menu,
            children: [...(menu.children || []), { ...newMenu, id }]
          };
        }
        return menu;
      }));
    } else {
      // 添加主菜单
      setMenus(prev => [...prev, { ...newMenu, id, children: [] }]);
    }
    
    setNewMenu({
      name: '',
      path: '',
      icon: 'file-text',
      parentId: null,
      sort: 1,
      visible: true,
      type: 'page'
    });
    setShowAddDialog(false);
  };

  const handleEditMenu = (menu) => {
    setEditingMenu(menu);
    setShowEditDialog(true);
  };

  const handleUpdateMenu = () => {
    setMenus(prev => prev.map(menu => {
      if (menu.id === editingMenu.id) {
        return editingMenu;
      }
      if (menu.children) {
        return {
          ...menu,
          children: menu.children.map(child => 
            child.id === editingMenu.id ? editingMenu : child
          )
        };
      }
      return menu;
    }));
    setShowEditDialog(false);
    setEditingMenu(null);
  };

  const handleDeleteMenu = (menuId) => {
    setMenus(prev => prev.filter(menu => {
      if (menu.id === menuId) return false;
      if (menu.children) {
        menu.children = menu.children.filter(child => child.id !== menuId);
      }
      return true;
    }));
    setSelectedMenus(prev => prev.filter(id => id !== menuId));
  };

  const handleToggleVisibility = (menuId) => {
    setMenus(prev => prev.map(menu => {
      if (menu.id === menuId) {
        return { ...menu, visible: !menu.visible };
      }
      if (menu.children) {
        return {
          ...menu,
          children: menu.children.map(child => 
            child.id === menuId ? { ...child, visible: !child.visible } : child
          )
        };
      }
      return menu;
    }));
  };

  const getStatusBadge = (visible) => {
    return visible ? (
      <Badge className="bg-green-100 text-green-800 hover:bg-green-100">
        显示
      </Badge>
    ) : (
      <Badge variant="secondary" className="bg-red-100 text-red-800 hover:bg-red-100">
        隐藏
      </Badge>
    );
  };

  const getTypeBadge = (type) => {
    return type === 'menu' ? (
      <Badge className="bg-blue-100 text-blue-800 hover:bg-blue-100">
        菜单
      </Badge>
    ) : (
      <Badge variant="secondary" className="bg-gray-100 text-gray-800 hover:bg-gray-100">
        页面
      </Badge>
    );
  };

  const renderIcon = (iconName) => {
    const IconComponent = iconMap[iconName] || FileText;
    return <IconComponent className="w-4 h-4" />;
  };

  return (
    <>
      {/* 头部工具栏 */}
      <div className="bg-white shadow-material-1 border-b border-material-grey-200 mt-3">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            {/* 左侧：菜单按钮和标题 */}
            <div className="flex items-center space-x-4">
              <MenuToggle onClick={toggleSidebar} />
              
              <div className="flex items-center space-x-3">
                <div className="w-10 h-10 bg-gradient-to-br from-primary to-primary-600 rounded-xl flex items-center justify-center">
                  <MenuSquare className="w-6 h-6 text-white" />
                </div>
                <div>
                  <h1 className="text-2xl font-bold text-material-grey-800">
                    菜单配置
                  </h1>
                  <p className="text-sm text-material-grey-600">
                    管理系统菜单结构和权限
                  </p>
                </div>
              </div>
            </div>

            {/* 右侧：操作按钮 */}
            <div className="flex items-center space-x-3">
              <Dialog open={showAddDialog} onOpenChange={setShowAddDialog}>
                <DialogTrigger asChild>
                  <Button className="bg-gradient-to-r from-primary to-primary-600 hover:from-primary-600 hover:to-primary-700">
                    <Plus className="w-4 h-4 mr-2" />
                    新增菜单
                  </Button>
                </DialogTrigger>
                <DialogContent className="sm:max-w-md">
                  <DialogHeader>
                    <DialogTitle>新增菜单</DialogTitle>
                  </DialogHeader>
                  <div className="space-y-4">
                    <div>
                      <Label htmlFor="name">菜单名称</Label>
                      <Input
                        id="name"
                        value={newMenu.name}
                        onChange={(e) => setNewMenu(prev => ({ ...prev, name: e.target.value }))}
                        placeholder="请输入菜单名称"
                      />
                    </div>
                    <div>
                      <Label htmlFor="path">路径</Label>
                      <Input
                        id="path"
                        value={newMenu.path}
                        onChange={(e) => setNewMenu(prev => ({ ...prev, path: e.target.value }))}
                        placeholder="请输入路径，如 /example"
                      />
                    </div>
                    <div>
                      <Label htmlFor="icon">图标</Label>
                      <Select value={newMenu.icon} onValueChange={(value) => setNewMenu(prev => ({ ...prev, icon: value }))}>
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="folder-open">文件夹</SelectItem>
                          <SelectItem value="file-text">文档</SelectItem>
                          <SelectItem value="settings">设置</SelectItem>
                          <SelectItem value="users">用户</SelectItem>
                          <SelectItem value="shield">安全</SelectItem>
                          <SelectItem value="home">首页</SelectItem>
                          <SelectItem value="upload">上传</SelectItem>
                          <SelectItem value="download">下载</SelectItem>
                          <SelectItem value="star">星标</SelectItem>
                          <SelectItem value="share2">分享</SelectItem>
                          <SelectItem value="help-circle">帮助</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                    <div>
                      <Label htmlFor="parent">父级菜单</Label>
                      <Select value={newMenu.parentId?.toString() || ''} onValueChange={(value) => setNewMenu(prev => ({ ...prev, parentId: value ? parseInt(value) : null }))}>
                        <SelectTrigger>
                          <SelectValue placeholder="选择父级菜单（可选）" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="">无（顶级菜单）</SelectItem>
                          {menus.map(menu => (
                            <SelectItem key={menu.id} value={menu.id.toString()}>
                              {menu.name}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                    </div>
                    <div>
                      <Label htmlFor="type">类型</Label>
                      <Select value={newMenu.type} onValueChange={(value) => setNewMenu(prev => ({ ...prev, type: value }))}>
                        <SelectTrigger>
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="menu">菜单</SelectItem>
                          <SelectItem value="page">页面</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                    <div>
                      <Label htmlFor="sort">排序</Label>
                      <Input
                        id="sort"
                        type="number"
                        value={newMenu.sort}
                        onChange={(e) => setNewMenu(prev => ({ ...prev, sort: parseInt(e.target.value) || 1 }))}
                        placeholder="排序号"
                      />
                    </div>
                  </div>
                  <DialogFooter>
                    <Button variant="outline" onClick={() => setShowAddDialog(false)}>
                      取消
                    </Button>
                    <Button onClick={handleAddMenu}>
                      确认添加
                    </Button>
                  </DialogFooter>
                </DialogContent>
              </Dialog>
            </div>
          </div>
        </div>
      </div>

      {/* 主内容区域 */}
      <div className="flex-1 container mx-auto px-4 py-6">
        {/* 统计卡片 */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
          <Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-material-grey-600">总菜单数</p>
                  <p className="text-2xl font-bold text-material-grey-900">{getAllMenuItems().length}</p>
                </div>
                <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                  <MenuSquare className="w-6 h-6 text-blue-600" />
                </div>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-material-grey-600">显示菜单</p>
                  <p className="text-2xl font-bold text-green-600">
                    {getAllMenuItems().filter(m => m.visible).length}
                  </p>
                </div>
                <div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                  <Eye className="w-6 h-6 text-green-600" />
                </div>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-material-grey-600">主菜单</p>
                  <p className="text-2xl font-bold text-purple-600">
                    {menus.length}
                  </p>
                </div>
                <div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                  <Folder className="w-6 h-6 text-purple-600" />
                </div>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardContent className="p-6">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium text-material-grey-600">子菜单</p>
                  <p className="text-2xl font-bold text-orange-600">
                    {getAllMenuItems().length - menus.length}
                  </p>
                </div>
                <div className="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center">
                  <FileText className="w-6 h-6 text-orange-600" />
                </div>
              </div>
            </CardContent>
          </Card>
        </div>

        {/* 搜索 */}
        <Card className="mb-6">
          <CardContent className="p-6">
            <div className="flex flex-col sm:flex-row gap-4">
              <div className="relative flex-1">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-material-grey-500" />
                <Input
                  placeholder="搜索菜单名称..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="pl-10"
                />
              </div>

              {selectedMenus.length > 0 && (
                <Button 
                  variant="destructive" 
                  onClick={() => {
                    selectedMenus.forEach(id => handleDeleteMenu(id));
                    setSelectedMenus([]);
                  }}
                  className="w-full sm:w-auto"
                >
                  <Trash2 className="w-4 h-4 mr-2" />
                  批量删除 ({selectedMenus.length})
                </Button>
              )}
            </div>
          </CardContent>
        </Card>

        {/* 菜单树形结构 */}
        <Card>
          <CardContent className="p-0">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead className="w-12">
                    <input
                      type="checkbox"
                      checked={selectedMenus.length === getAllMenuItems().length && getAllMenuItems().length > 0}
                      onChange={handleSelectAll}
                      className="w-4 h-4 text-primary border-material-grey-300 rounded focus:ring-primary/50"
                    />
                  </TableHead>
                  <TableHead>菜单信息</TableHead>
                  <TableHead>路径</TableHead>
                  <TableHead>类型</TableHead>
                  <TableHead>排序</TableHead>
                  <TableHead>状态</TableHead>
                  <TableHead className="text-right">操作</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {filteredMenus.map((menu) => (
                  <React.Fragment key={menu.id}>
                    {/* 主菜单 */}
                    <TableRow>
                      <TableCell>
                        <input
                          type="checkbox"
                          checked={selectedMenus.includes(menu.id)}
                          onChange={() => handleMenuSelect(menu.id)}
                          className="w-4 h-4 text-primary border-material-grey-300 rounded focus:ring-primary/50"
                        />
                      </TableCell>
                      <TableCell>
                        <div className="flex items-center space-x-3">
                          {menu.children && menu.children.length > 0 && (
                            <button
                              onClick={() => toggleExpanded(menu.id)}
                              className="p-1 hover:bg-material-grey-100 rounded"
                            >
                              {expandedMenus.includes(menu.id) ? (
                                <ChevronDown className="w-4 h-4" />
                              ) : (
                                <ChevronRight className="w-4 h-4" />
                              )}
                            </button>
                          )}
                          <div className="w-8 h-8 bg-gradient-to-br from-primary/20 to-primary/30 rounded-lg flex items-center justify-center">
                            {renderIcon(menu.icon)}
                          </div>
                          <div>
                            <p className="font-medium text-material-grey-900">{menu.name}</p>
                            <p className="text-sm text-material-grey-500">ID: {menu.id}</p>
                          </div>
                        </div>
                      </TableCell>
                      <TableCell>
                        <code className="text-sm bg-material-grey-100 px-2 py-1 rounded">
                          {menu.path}
                        </code>
                      </TableCell>
                      <TableCell>
                        {getTypeBadge(menu.type)}
                      </TableCell>
                      <TableCell>
                        <span className="text-material-grey-700">{menu.sort}</span>
                      </TableCell>
                      <TableCell>
                        {getStatusBadge(menu.visible)}
                      </TableCell>
                      <TableCell className="text-right">
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button variant="ghost" size="icon">
                              <MoreVertical className="w-4 h-4" />
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="end">
                            <DropdownMenuItem onClick={() => handleEditMenu(menu)}>
                              <Edit className="w-4 h-4 mr-2" />
                              编辑
                            </DropdownMenuItem>
                            <DropdownMenuItem onClick={() => handleToggleVisibility(menu.id)}>
                              {menu.visible ? (
                                <>
                                  <EyeOff className="w-4 h-4 mr-2" />
                                  隐藏
                                </>
                              ) : (
                                <>
                                  <Eye className="w-4 h-4 mr-2" />
                                  显示
                                </>
                              )}
                            </DropdownMenuItem>
                            <DropdownMenuItem 
                              onClick={() => handleDeleteMenu(menu.id)}
                              className="text-red-600"
                            >
                              <Trash2 className="w-4 h-4 mr-2" />
                              删除
                            </DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </TableCell>
                    </TableRow>

                    {/* 子菜单 */}
                    {menu.children && expandedMenus.includes(menu.id) && menu.children.map((child) => (
                      <TableRow key={child.id} className="bg-material-grey-50">
                        <TableCell>
                          <input
                            type="checkbox"
                            checked={selectedMenus.includes(child.id)}
                            onChange={() => handleMenuSelect(child.id)}
                            className="w-4 h-4 text-primary border-material-grey-300 rounded focus:ring-primary/50"
                          />
                        </TableCell>
                        <TableCell>
                          <div className="flex items-center space-x-3 ml-8">
                            <div className="w-6 h-6 bg-gradient-to-br from-material-grey-200 to-material-grey-300 rounded-md flex items-center justify-center">
                              {renderIcon(child.icon)}
                            </div>
                            <div>
                              <p className="font-medium text-material-grey-800">{child.name}</p>
                              <p className="text-xs text-material-grey-500">ID: {child.id}</p>
                            </div>
                          </div>
                        </TableCell>
                        <TableCell>
                          <code className="text-sm bg-material-grey-100 px-2 py-1 rounded">
                            {child.path}
                          </code>
                        </TableCell>
                        <TableCell>
                          {getTypeBadge(child.type)}
                        </TableCell>
                        <TableCell>
                          <span className="text-material-grey-700">{child.sort}</span>
                        </TableCell>
                        <TableCell>
                          {getStatusBadge(child.visible)}
                        </TableCell>
                        <TableCell className="text-right">
                          <DropdownMenu>
                            <DropdownMenuTrigger asChild>
                              <Button variant="ghost" size="icon">
                                <MoreVertical className="w-4 h-4" />
                              </Button>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent align="end">
                              <DropdownMenuItem onClick={() => handleEditMenu(child)}>
                                <Edit className="w-4 h-4 mr-2" />
                                编辑
                              </DropdownMenuItem>
                              <DropdownMenuItem onClick={() => handleToggleVisibility(child.id)}>
                                {child.visible ? (
                                  <>
                                    <EyeOff className="w-4 h-4 mr-2" />
                                    隐藏
                                  </>
                                ) : (
                                  <>
                                    <Eye className="w-4 h-4 mr-2" />
                                    显示
                                  </>
                                )}
                              </DropdownMenuItem>
                              <DropdownMenuItem 
                                onClick={() => handleDeleteMenu(child.id)}
                                className="text-red-600"
                              >
                                <Trash2 className="w-4 h-4 mr-2" />
                                删除
                              </DropdownMenuItem>
                            </DropdownMenuContent>
                          </DropdownMenu>
                        </TableCell>
                      </TableRow>
                    ))}
                  </React.Fragment>
                ))}
              </TableBody>
            </Table>

            {filteredMenus.length === 0 && (
              <div className="text-center py-12">
                <div className="w-24 h-24 mx-auto mb-4 bg-material-grey-200 rounded-full flex items-center justify-center">
                  <MenuSquare className="w-8 h-8 text-material-grey-500" />
                </div>
                <h3 className="text-lg font-medium text-material-grey-700 mb-2">
                  {searchQuery ? '未找到匹配的菜单' : '暂无菜单数据'}
                </h3>
                <p className="text-material-grey-500">
                  {searchQuery ? '尝试使用不同的关键词搜索' : '点击上方按钮开始添加菜单'}
                </p>
              </div>
            )}
          </CardContent>
        </Card>
      </div>

      {/* 编辑菜单对话框 */}
      <Dialog open={showEditDialog} onOpenChange={setShowEditDialog}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>编辑菜单</DialogTitle>
          </DialogHeader>
          {editingMenu && (
            <div className="space-y-4">
              <div>
                <Label htmlFor="edit-name">菜单名称</Label>
                <Input
                  id="edit-name"
                  value={editingMenu.name}
                  onChange={(e) => setEditingMenu(prev => ({ ...prev, name: e.target.value }))}
                />
              </div>
              <div>
                <Label htmlFor="edit-path">路径</Label>
                <Input
                  id="edit-path"
                  value={editingMenu.path}
                  onChange={(e) => setEditingMenu(prev => ({ ...prev, path: e.target.value }))}
                />
              </div>
              <div>
                <Label htmlFor="edit-icon">图标</Label>
                <Select 
                  value={editingMenu.icon} 
                  onValueChange={(value) => setEditingMenu(prev => ({ ...prev, icon: value }))}
                >
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="folder-open">文件夹</SelectItem>
                    <SelectItem value="file-text">文档</SelectItem>
                    <SelectItem value="settings">设置</SelectItem>
                    <SelectItem value="users">用户</SelectItem>
                    <SelectItem value="shield">安全</SelectItem>
                    <SelectItem value="home">首页</SelectItem>
                    <SelectItem value="upload">上传</SelectItem>
                    <SelectItem value="download">下载</SelectItem>
                    <SelectItem value="star">星标</SelectItem>
                    <SelectItem value="share2">分享</SelectItem>
                    <SelectItem value="help-circle">帮助</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label htmlFor="edit-type">类型</Label>
                <Select 
                  value={editingMenu.type} 
                  onValueChange={(value) => setEditingMenu(prev => ({ ...prev, type: value }))}
                >
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="menu">菜单</SelectItem>
                    <SelectItem value="page">页面</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label htmlFor="edit-sort">排序</Label>
                <Input
                  id="edit-sort"
                  type="number"
                  value={editingMenu.sort}
                  onChange={(e) => setEditingMenu(prev => ({ ...prev, sort: parseInt(e.target.value) || 1 }))}
                />
              </div>
              <div className="flex items-center space-x-2">
                <Switch
                  id="edit-visible"
                  checked={editingMenu.visible}
                  onCheckedChange={(checked) => setEditingMenu(prev => ({ ...prev, visible: checked }))}
                />
                <Label htmlFor="edit-visible">显示菜单</Label>
              </div>
            </div>
          )}
          <DialogFooter>
            <Button variant="outline" onClick={() => setShowEditDialog(false)}>
              取消
            </Button>
            <Button onClick={handleUpdateMenu}>
              保存更改
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  );
};

export default MenuConfig;
